/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>自定义海报设置请注意上传的图片尺寸，避免影响海报的展示效果。</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <el-form :model="form" label-width="200px">
      <el-form-item label="海报名称">
        <el-input v-model="form.poster_name" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="背景图片">
        <el-upload
          class="avatar-uploader"
          :action="apiHead + '/mall/upload?type=poster'"
          :show-file-list="false"
          :on-success="handlePoster"
          :before-upload="beforeAvatarUpload"
        >
          <el-image
            ref="backUrl"
            v-if="form.back_url"
            :src="form.back_url"
            style="width:64px; height:100px; display:block;"
          ></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <p class="notic">自定义海报建议尺寸640*1008像素，可根据该数据对二维码位置进行调整</p>
        <p
          class="err-msg"
          v-if="form.back_url"
        >当前上传的图片宽高像素为{{form.poster_width}}*{{form.poster_height}}</p>
      </el-form-item>
      <el-form-item label="二维码位置">
        <el-input
          type="number"
          v-model="form.canvas_x"
          @input="drawCanvas()"
          placeholder="x轴"
          size="mini"
          style="width:auto"
        >
          <template slot="append">x 坐标</template>
        </el-input>
        <br />
        <el-input
          type="number"
          v-model="form.canvas_y"
          @input="drawCanvas()"
          placeholder="y轴"
          size="mini"
          style="width:auto"
        >
          <template slot="append">y 坐标</template>
        </el-input>
        <p class="err-msg">输入像素数值可移动模拟二维码在海报背景图上的位置</p>
      </el-form-item>
      <el-form-item label="二维码大小">
        <el-input
          type="number"
          v-model="form.qrcode_size"
          @input="drawCanvas()"
          size="mini"
          style="width:auto"
        ></el-input>
        <p class="err-msg">数值越大，二维码图片越大</p>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()" :loading="isLoading">确认提交</el-button>
      </el-form-item>
      <el-form-item label="预览">
        <canvas ref="canvas" :width="form.canvas_width" :height="form.canvas_height"></canvas>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getConfigs, updateConfigs } from "@/utils/api";
import qrcode_src from "@/static/images/poster/qrcode80.png";
export default {
  data() {
    return {
      form: {
        poster_name: "", //海报名称
        canvas_width: 375, //画布宽度
        canvas_height: 675, //画布高度
        poster_width: 0, //海报宽度
        poster_height: 0, //海报高度
        back_url: "", //海报路径
        canvas_x: 0, //canvas移动的x轴
        canvas_y: 0, //canvas移动的y轴
        add_time: 0, //添加时间
        update_time: 0, //更新时间
        qrcode_size: 150 //二维码大小
      },
      img: new Image(), // 背景图片
      QRCode: new Image(), // 二维码
      context: {}, // canvas对象
      isLoading: false
    };
  },
  created() {
    this.getConfigs();
    this.QRCode.src = qrcode_src;
  },
  methods: {
    getConfigs() {
      var that = this;
      getConfigs({ inc_type: "poster" }).then(function(res) {
        if (res.poster) {
          that.form = res.poster;
          that.img.src = that.form.back_url;
          setTimeout(() => {
            that.checkCpmlete();
          }, 100);
        }
      });
    },
    drawCanvas() {
      const canvas = this.$refs.canvas;
      this.context = canvas.getContext("2d");
      //清空画布
      this.context.clearRect(
        0,
        0,
        this.form.canvas_width,
        this.form.canvas_height
      );
      //绘制背景
      this.context.drawImage(
        this.img,
        0,
        0,
        this.form.poster_width,
        this.form.poster_height,
        0,
        0,
        this.form.canvas_width,
        this.form.canvas_height
      );
      //绘制二维码
      this.context.drawImage(
        this.QRCode,
        this.form.canvas_x,
        this.form.canvas_y,
        this.form.qrcode_size,
        this.form.qrcode_size
      );
    },
    checkCpmlete() {
      var that = this;
      if (this.img.complete) {
        this.drawCanvas();
      } else {
        this.img.onload = function() {
          that.drawCanvas();
        };
        this.img.onerror = function() {
          console.log("图片加载失败");
        };
      }
    },
    onSubmit() {
      if (!this.form.add_time) {
        //尚未配置
        this.form.add_time = parseInt(
          new Date().getTime() / 1000
        ); /*当前时间时间戳*/
      }
      var that = this;
      that.isLoading = true;
      updateConfigs("poster", this.form).then(function(res) {
        if (res.status == 1) {
          that.$message.success("保存成功");
        } else {
          that.$message.error("保存失败,失败原因:" + res.msg);
        }
        that.isLoading = false;
      });
    },
    handlePoster(res) {
      if (res.status < 1) {
        this.$message.error(res.msg);
        return;
      }
      this.form.back_url = res.result;
      this.img.src = res.result;
      this.checkCpmlete();
    },
    beforeAvatarUpload(file) {
      const isPic =
        file.type === "image/gif" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPic) {
        this.$message.error("上传图片只能是 JPG、JPEG、PNG、GIF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }

      // 获取图片文件宽高
      let that = this;
      new Promise(function() {
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          that.form.canvas_width = img.width > 640 ? 640 : img.width;
          that.form.canvas_height = img.height > 1008 ? 1008 : img.height;
          that.form.poster_width = img.width;
          that.form.poster_height = img.height;
        };
        img.src = _URL.createObjectURL(file);
      });

      return isPic && isLt2M;
    }
  }
};
</script>
<style scoped>
.avatar-uploader-icon {
  line-height: 100px;
}
</style>
